<template>
  <div id="app">
    <loader :loading="loading">
      <top-bar></top-bar>
      <div class="title">
        <h1>数字小广大</h1>
      </div>
      <transition name="slide" mode="out-in">
        <router-view />
      </transition>
        
        
      
    </loader>
  </div>
</template>

<script>
import Loader from '@/components/Loader'

// 子组件
import TopBar from '@/components/TopBar'

export default {
  name: 'App',
  components: {
    TopBar,
    Loader
  },
  data() {
    return {
      loading: false
    }
  },
  beforeCreate() {
    // 检查用户是否之前登录过
    let CASTGC = window.localStorage.getItem('CASTGC')
    if(CASTGC != null) {
      this.$store.commit('handleLogin',CASTGC)
    }
  },
  created() {
    this.loading = true
    // 判断用户是否已经登录
    let CASTGC = this.$store.state.CASTGC
    if(CASTGC === '') {
      // 切换到登录页
      this.$router.replace('/login')
    }else {
      this.$router.replace('/home')
    }
    this.loading = false
  }
}
</script>

<style>
  #app {
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  }
  .title {
    text-align: center;
    text-shadow: 2px 2px 10px rgba(100, 100, 100, 0.5);
  }
  .slide-enter-active,
  .slide-leave-active {
    transition: opacity 0.5s,transform 0.3s;
  }
  .slide-enter,
  .slide-leave-to {
    opacity: 0;
    transform: translateX(-30%);
  }

  /* 滚动条设置 */
  body .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__wrap,
  .el-scrollbar__view {
    height: 100%;
  }

  .el-select-dropdown .el-scrollbar__wrap {
    overflow-x: scroll !important;
  }

</style>
